<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML中嵌入CSS法二内部定义样式块对象</title>
		
		<!-- 样式块对象  --这是HTML注释 -->
		<style>
			/* 这是CSS的注释 */
			/* 
				设置某个元素的样式，首先需要选中这个元素，常见的选中元素的方式有三种：标签选择器、id选择器、类选择器
				优先级：id选择器优先级 > 类选择器 > 标签选择器 
			*/
			
			/*
				id选择器的使用：
				id选择器只能作用于页面中的某一个节点，因为id是不能重复的
			*/
			#mydiv{
				width: 500px;
				height: 200px;
				background-color: aquamarine;
			}
			/* 
				类选择器的使用：
				只要节点有相同的class,就可以用类选择器同时操作
			 */
			.student{
				width: 200px;
				height: 50px;
				background-color: chartreuse;
			}
			/* 
				标签选择器的使用：
				作用于当前页面中所有的input标签元素
			*/
		   input{
			   width: 200px;
			   height: 20px;
			   /* border-color: red;
			   border-style: solid;
			   border-width: 1px; 或者用下一行代码*/
			   border: red solid 1px;
		   }
		</style>
		
	</head>
	<body>
		<!-- id选择器 -->
		<div id="mydiv"></div>  
		<hr>
		<!-- 标签选择器 -->
		username <input type="text" name="username"/> <br>
		password <input  type="password" name="password"/> <br>
		<input type="submit" value="login"/>
		<hr>
		<!-- 类选择器 -->
		<input class="student" type="text"/> <!-- 类选择器+标签选择器 --> <br><br>
		<div class="student"></div>
	</body>
</html>